<template>
  <!-- <div class="dialog">
    <div class="dialog-header">
      <slot name="header" title="宇宙无敌大标题" desc="小标题描述"></slot>
    </div> -->

    <!-- <div class="dialog-main"> -->
      <!-- 插槽标签：作用占位置，将来写在组件标签内部的内容，会将slot替换 -->
      <!-- <slot name="default">我是后备内容，当没有传递结构时显示</slot>
    </div>

    <div class="dialog-footer">
      <slot name="footer" money="100" :yes="yes" :no="no"></slot>
    </div>
  </div> -->
  <div>
    <div>开始</div>
      <slot name="new" :title="title"></slot>
      <slot name="old" :arr="arr"></slot>
      <div>结束</div>
  </div>
</template>

<script>
// 如果是简单的场景 => 传递基本数据，可以使用props传值解决需求
// 明确：
// 1. props 可以用于传值，解决组件定制   MyProduct 商品组件（标题，图片链接，价格）
// 2. 插槽  可以传结构, 解决组件定制    当结构允许使用者自定义的场景，一般都会用插槽（对话框封装）
export default {
  data () {
    return {
      yes: '是',
      no: '否',
      title:'新内容',
      arr:[1,2,3]
    }
  }
}
</script>

<style>
.dialog {
  width: 400px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
  padding: 0 10px;
  padding-bottom: 20px;
}
</style>
